{% extends 'base.html' %}
{% block title %}{{ post.title }}{% endblock %}

{% block header %}
<header class="masthead" style="background-image: url({{ url_for('static',filename='img/bg/home-bg.jpg') }})">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post-heading" style="text-align:center">
              <h1>{{ post.title }}</h1><br>
                <span class="meta">Posted by <a href="{{ url_for('main.author_info', username=post.author.username) }}">{{ post.author.username }}</a> on {{ moment(post.create_time).format('YYYY/MM/DD, h:mm a') }}</span>
                {% if post.category%}
                <span class="meta">Category: <a href="{{ url_for('main.index') }}?category={{ post.category }}">{{ post.category }}</a></span>
                {% endif %}
                <span class="meta">Tags:
                    {% for tag in post.tags %} <a href="{{ url_for('main.index') }}?tag={{ tag }}">{{ tag }}</a>  {% endfor %}
                </span>
            </div>
          </div>
        </div>
      </div>
    </header>
{% endblock %}

{% block main %}
    <div class="container">
        <article>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    {{ post.content_html|safe }}
                </div>
            </div>

            {% if allow_share_article %}
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <hr>
                    <div class="share-component" data-sites="wechat,weibo,qq,douban,twitter,google,facebook,linkedin"><span>Share to:</span></div>
                </div>
            </div>
            {% endif %}
        </article>
        <hr>
        {% if allow_comment %}
            <article>
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        {{ comment_html|safe }}
                    </div>
                </div>
                <div class="up-to-top">
                    <button id="button-up" class="glyphicon glyphicon-chevron-up"></button>
                </div>
            </article>
        {% endif %}
    </div>
{% endblock %}
{% block js %}
<script src="https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js"></script>
<script>
 $('#button-up').on('click',function (event) {
     $('html,body').animate({
         scrollTop:0
     },500)
 })
$(".up-to-top").mouseover(function(){
	$("#button-up").css("background-color","#00A1D6");
    $("#button-up").css("color","#F6F9FA");
	});
 $(".up-to-top").mouseout(function(){
	$("#button-up").css("background-color","#ccc");
    $("#button-up").css("color","#00A1D6");
	});
$(window).on('scroll', function () {
    if($(window).scrollTop() > $(window).height())
        $('#button-up').fadeIn();
    else
        $('#button-up').fadeOut();
})

$(window).trigger('scroll');
</script>
<style>
#button-up {
    position: fixed;
    right: 80px;
    bottom: 30px;
    height: 30px;
    top: 500px;
    border: 0px;
    color: #00A1D6;
}
</style>
{% endblock %}